<template>
  <div class="aui-card-list">
    <el-card shadow="never" class="aui-card-list-body">
      <el-row>
        <el-col :span="24">
          <el-tabs v-model="dataForm.type" @tab-click="handleClick">
            <el-tab-pane v-for="(item, i) in this.typeList" :key="i" :name="item.val">
              <span slot="label" :class="[item.stat>0 && item.val!=='4'?'useRed':'']">{{item.label+'('+item.stat+')'}}</span>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <!-- <el-col :span="4">
        <el-button type="primary" @click="comparsion()">{{ '比较' }}</el-button>
      </el-col> -->
      </el-row>
      <!--  锁定表头设置   :height="this.tableHeight" -->
      <vxe-grid border stripe resizable :columns="tableColumn" :data="dataList"></vxe-grid>
      <el-pagination :current-page="page" :page-sizes="pageSizes" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </el-card>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './cpnResult-add-or-update'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      searchShow: true,
      mixinViewModuleOptions: {
        activatedIsNeed: true,
        getDataListURL: '/cpn/cpnResult/selectPage',
        getDataListIsPage: true,
        deleteURL: '/cpn/cpnResult',
        deleteIsBatch: true,
        exportURL: '/cpn/cpnResult/export'
      },
      headLock: false,
      dataForm: {
        themeId: '9527',
        type: '1'
      },
      tableColumn: [],
      typeList: [
        { val: '1', label: '源1有源2无', stat: 0 },
        { val: '2', label: '源2有源1无', stat: 0 },
        { val: '3', label: '都有但不一致', stat: 0 },
        { val: '4', label: '完全匹配', stat: 0 },
        { val: '5', label: '行数不一致', stat: 0 },
        { val: '6', label: '行数不唯一', stat: 0 }
      ]
    }
  },
  components: {
    AddOrUpdate
  },
  created () {
    // 读取路由参数
    let params = this.$route.params
    if (params.themeId) {
      this.dataForm.themeId = params.themeId
    }
  },
  methods: {
    // comparsion () {
    //   this.$http.post('/cpn/cpnResult/comparsion', { themeId: this.dataForm.themeId })
    //     .then(({ data: res }) => {
    //       console.log('res', res)
    //     })
    // },
    handleClick () {
      this.page = 1
      this.getDataList()
    },
    withTypeStat (stat) {
      for (const item of this.typeList) {
        item.stat = this.$getDataItem(stat, item.val, 'type').data1Cnt || 0
      }
    },
    // 获取数据列表
    getDataList () {
      return new Promise((resolve, reject) => {
        this.dataListLoading = true
        this.$http.get(this.mixinViewModuleOptions.getDataListURL, {
          params: {
            order: this.order,
            orderField: this.orderField,
            sumFields: this.sumFields,
            page: this.mixinViewModuleOptions.getDataListIsPage ? this.page : null,
            limit: this.mixinViewModuleOptions.getDataListIsPage
              ? this.limit
              : null,
            ...this.dataForm
          }
        }).then(({ data: res }) => {
          this.dataListLoading = false
          this.dataList = []
          if (res.code !== 0) {
            this.dataList = []
            this.total = 0
            reject(new Error(false))
            return
          }
          this.dataList = res.data.page.list
          this.total = res.data.page.total
          this.tableColumn = res.data.headers
          console.log('res.data', res.data)
          this.withTypeStat(res.data.stat)
          resolve(this.dataList)
        }).catch((e) => {
          this.dataListLoading = false
          console.error(e)
          reject(new Error(false))
        })
      })
    },
    // 新增 / 修改
    addOrUpdateHandle (row) {
      let id
      if (row) {
        id = row.id
      }
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.dataForm.id = id
        this.$refs.addOrUpdate.init()
      })
    }
  }
}
</script>

<style lang="scss">
.useRed {
  color: #f56c6c;
}
</style>
